<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/zhihuishouye.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">

</head>

<body>
    <div class="box">
        <div class="tit_box">智慧社区</div>
        <div class="header_container">
            <div class="left">
                <div class="location">
                    <i class="iconfont icon-dizhiguanli"></i>
                    <p>首尔甜城</p>
                </div>
                <div class="sousuo">
                    <i class="iconfont icon-sousuo"></i>
                    <input type="text" placeholder="搜索关键字">
                </div>
            </div>
            <!-- 导航开始 -->
            <div class="nav">
                <div class="nav_box">
                    <div class="play">
                        <i class="iconfont icon-qian"></i>
                    </div>
                    <span>生活缴费</span>

                </div>
                <div class="nav_box  Property_repair ">
                    <div class="play">
                        <i class="iconfont icon-chejian"></i>
                    </div>
                    <span>物业报修</span>

                </div>

                <div class="nav_box  questions">
                    <div class="play">
                        <i class="iconfont icon-wentifankui"></i>
                    </div>
                    <span>问题反馈</span>
                </div>

                <div class="nav_box  help ">
                    <div class="play">
                        <i class="iconfont icon-xiaoxi"></i>
                    </div>
                    <span>我要帮助</span>
                </div>

            </div>
        </div>

        <!-- 内容 -->
        <div class="content">
            <!-- 头条 -->
            <div class="title_top">
                <div class="font">
                    <img src="../image/toutiao.png" alt="">
                    <p class="about">关于我行对符合条件的账户关于我行对符合条件的账户</p>
                </div>
                <div class="red">
                    <i class="iconfont icon-circle-big"></i>
                    <p class="more">更多</p>
                    <i class="iconfont icon-arrow-right"></i>
                </div>
            </div>
            <img src="../image/fangzi.png" alt="">



            <div class="life">
                <div class="life_head">
                    <span>生活门店 </span>
                </div>
                <div class="life_foot">
                    <div class="foot1">
                        <img src="../image/shenghuo.png" alt="">

                    </div>
                    <div class="foot2">
                        <img src="../image/miaosha.png" alt="">

                    </div>
                </div>
            </div>

            <!-- 资讯 -->
            <div class="new">
                <!-- 头布 -->
                <div class="new_head">
                    <span>资讯</span>
                    <i class="iconfont icon-arrow-right"></i>
                </div>
                <!-- 内容 -->
                <div class="content_all">
                    <!-- 文字 -->
                    <div class="information">
                        <p class="word">
                            关于调整我行ATM跨行现手续费收费标准金属风格十分豪华双人虽然也是
                        </p>
                        <p class="time"> 2021-07-23</p>
                    </div>
                    <!-- 图片 -->
                    <img src="../image/首页_01.png" alt="">
                </div>

                <div class="content_all">
                    <!-- 文字 -->
                    <div class="information">
                        <p class="word">
                            关于调整我行ATM跨行现手续费收费标准的公示给他的身高佛教僧人同一个地址发给还是
                        </p>
                        <p class="time"> 2021-07-23</p>
                    </div>
                    <!-- 图片 -->
                    <img src="../image/首页_02.png" alt="">
                </div>

                <div class="content_all">
                    <!-- 文字 -->
                    <div class="information">
                        <p class="word">
                            关于调整我行ATM跨行现手续费收费标准的公热狗梵蒂冈地方官大使馆是法国海飞丝广告
                        </p>
                        <p class="time">2021-07-23</p>
                    </div>
                    <!-- 图片 -->
                    <img src="../image/首页_03.png" alt="">
                </div>
            </div>
        </div>

        <div class="foot">
            <div class="zhuye">
                <i class="iconfont icon-zhuye"></i>
                <p>主页</p>
            </div>
            <div class="shangdian">
                <i class="iconfont icon-shangdian"></i>
                <p>商店</p>
            </div>
            <div class="xiaoxi">
                <i class="iconfont icon-xiaoxi1"></i>
                <p>消息</p>
            </div>
            <div class="wode">
                <i class="iconfont icon-wodedangxuan"></i>
                <p>我的</p>

            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
    function adapter() {
        //获取布局视口宽度，因为开启了理想视口，布局视口=设备横向独立像素值
        const dpWidth = document.documentElement.clientWidth
        //计算根字体大小
        const rootFonstSize = (dpWidth * 100) / 1125
        //设置根字体大小
        document.documentElement.style.fontSize = rootFonstSize + 'px'
    }
    adapter()
    window.onresize = adapter
</script>